<template>
   <div class="aside-box">
      <ul class="full-layout scrollbar">
          <li 
          v-for="(item) in routerList" 
          :key="item.path"
          @click="$router.push({name:item.name});"
          class="aside-item flex-center"
          :class="{'aside-item-actived':$route.name===item.name}">
            {{item.meta.title}}
          </li>
      </ul>
   </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue';
export default {
    name: 'DocAsideNav',
    components: {},
    props: {
        routerList:{
            type:Array,
            default:null
        }
    },
    emits: [],
    setup (props, context) 
    {
        let data = reactive({
        });

        let methods = {
            
        };

        return {
            ...toRefs(data),
            ...methods
        };
    }
};

</script>
<style lang='scss' scoped>

.aside-box {
    height: 100%;
    width: 240px;
    padding: 15px 10px;
    transition: all .4s;

    ul {
        background-color: white;
        border-radius: 5px;
        padding: 10px;
        overflow-y: auto;
    }

    .aside-item {
        background-color: #efefef;
        border-radius: 5px;
        cursor: pointer;
        transition: .4s;
        margin: 0 0 10px;
        color: #5c5c55;
        padding: 10px;
        font-size: 12px;

        &:hover {
            color: rgba(64, 158, 255, 1);
        }
    }

    .aside-item-actived {
        background-color: rgba(64, 158, 255, .2);
        color: rgba(64, 158, 255, 1);
    }
}

</style>
